<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue2留言板</title>
    <!-- 引入Vue和Element UI -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            background-image: url("bei1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }

        #app {
            width: 80%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .message-list {
            list-style-type: none;
            padding: 0;
            width: 100%;
        }

        .message-item {
            margin-bottom: 10px;
            padding: 15px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>留言板</h1>
        
        <!-- 使用Element UI的表单组件 -->
        <el-form @submit.native.prevent="addMessage">
            <el-form-item label="留言内容">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="newMessage"
                    placeholder="写下你想说的话..."
                    clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">提交留言</el-button>
            </el-form-item>
        </el-form>
        
        <!-- 留言列表部分保持原有结构 -->
        <ul class="message-list">
            <li v-for="(message, index) in messages" :key="index" class="message-item">
                {{ message.text }}
                <el-button 
                    @click="deleteMessage(index)" 
                    type="danger" 
                    icon="el-icon-delete" 
                    circle 
                    size="mini"
                    style="float: right;">
                </el-button>
                <div style="font-size: 12px; color: #909399; margin-top: 5px;">
                    {{ message.time }}
                </div>
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newMessage: '',
                messages: []
            },
            methods: {
                addMessage() {
                    if (this.newMessage.trim() === '') {
                        this.$message.warning('留言内容不能为空');
                        return;
                    }
                    
                    const now = new Date();
                    const timeString = now.toLocaleString();
                    
                    this.messages.unshift({
                        text: this.newMessage,
                        time: timeString
                    });
                    
                    this.newMessage = '';
                    this.$message.success('留言添加成功');
                    
                    localStorage.setItem('messages', JSON.stringify(this.messages));
                },
                deleteMessage(index) {
                    this.$confirm('确定要删除这条留言吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.messages.splice(index, 1);
                        localStorage.setItem('messages', JSON.stringify(this.messages));
                        this.$message.success('删除成功');
                    }).catch(() => {});
                }
            },
            mounted() {
                const savedMessages = localStorage.getItem('messages');
                if (savedMessages) {
                    this.messages = JSON.parse(savedMessages);
                }
            }
        });
    </script>
</body>
</html>